<template>
  <div class="relative min-h-screen overflow-hidden text-gray-100 font-sans">
    <!-- 背景图：优先用 backdrop，没有则用 poster -->
    <div v-if="movieDetails.backdrop || movieDetails.poster"
      class="fixed inset-0 bg-cover bg-center transition-opacity duration-700"
      :style="{ backgroundImage: `url(${movieDetails.backdrop || movieDetails.poster})` }" aria-hidden="true"></div>

    <!-- 背景模糊 + 黑色渐变叠加，增强前景可读性 -->
    <div class="fixed inset-0 bg-black/40 backdrop-blur-md pointer-events-none"></div>
    <div class="fixed inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/90 pointer-events-none"></div>
    <!-- 主内容（位于背景上方）-->
    <div class="relative z-10 max-h-screen overflow-y-auto p-8 pt-14 md:pt-10 pb-20 box-border">
      <!-- 顶部返回按钮 -->
      <!-- <button @click="goBack"
        class="fixed cursor-pointer top-12 left-4 z-20 p-2 rounded-full backdrop-blur-lg bg-white/20 hover:bg-white/30 transition-colors duration-200 shadow-xl">
        <img src="/src/assets/svg/arrow-left.svg" alt="返回" class="w-6 h-6 text-white" />
      </button> -->

      <!-- 电影信息卡片：半透明毛玻璃风 -->
      <div class="flex flex-col md:flex-row rounded-3xl p-6 md:p-8 space-y-6 md:space-x-8"
        style="background: rgba(255,255,255,0.06); box-shadow: 0 16px 40px rgba(0,0,0,0.5);">
        <!-- 封面 -->
        <div
          class="flex-shrink-0 w-full max-w-xs md:w-64 md:h-96 mx-auto rounded-xl overflow-hidden shadow-2xl bg-gray-800/40 transform transition-transform duration-300 hover:scale-105">
          <img v-if="movieDetails.poster" :src="movieDetails.poster" class="w-full h-full object-cover" alt="poster" />
          <span v-else class="w-full h-full flex items-center justify-center text-white text-6xl">🎬</span>
        </div>

        <!-- 信息 -->
        <div class="flex-1 flex flex-col pt-4 md:pt-0 ml-8">
          <h2 class="text-3xl md:text-5xl font-extrabold text-white leading-tight mb-2">
            {{ movieDetails.title }}
          </h2>
          <p class="text-white/70 text-lg">
            {{ movieDetails.release_date }}
            <span v-if="movieDetails.genres"> • {{ movieDetails.genres.join(' / ') }}</span>
          </p>

          <div class="flex items-center space-x-4 mt-4">
            <div class="flex items-center gap-1.5 text-lg text-yellow-400">
              <img src="/src/assets/svg/star.svg" alt="评分星级" class="w-5 h-5"
                style="filter: invert(1) grayscale(100%) brightness(100%);">
              <span class="font-bold">{{ movieDetails.vote_average }}</span>
            </div>
            <p class="text-white/70 text-lg">时长: {{ movieDetails.runtime }} 分钟</p>
          </div>

          <div class="mt-6">
            <p class="text-white/90 text-base leading-relaxed max-h-48 overflow-y-auto custom-scrollbar">
              {{ movieDetails.overview }}
            </p>
          </div>

          <div class="mt-6 flex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
            <!-- 播放按钮 -->
            <button v-if="videoFiles.length > 0" @click="playVideo(videoFiles[0])"
              class="flex-1 cursor-pointer w-full sm:w-auto px-6 py-3 rounded-full bg-white text-black font-semibold text-lg transition-transform duration-200 hover:scale-105 hover:bg-white/90 shadow-lg">
              播放
            </button>

            <!-- 搜索字幕按钮 -->
            <button @click="searchSubtitles"
              class="flex-1 w-full cursor-pointer sm:w-auto px-6 py-3 rounded-full border border-white/40 text-white/90 font-semibold text-lg transition-transform duration-200 hover:scale-105 hover:bg-white/10">
              <span class="flex items-center justify-center gap-2">
                <img src="/src/assets/svg/subtitles.svg" alt="字幕" class="w-5 h-5"
                  style="filter: invert(1) grayscale(100%) brightness(100%);">
                搜索字幕
              </span>
            </button>

            <!-- 打开文件夹按钮 -->
            <button @click="openFolder"
              class="w-12 h-12 flex cursor-pointer items-center justify-center rounded-full border border-white/40 text-white/90 transition-transform duration-200 hover:scale-110 hover:bg-white/10">
              <img src="/src/assets/svg/folder.svg" alt="文件夹" class="w-6 h-6"
                style="filter: invert(1) grayscale(100%) brightness(100%);" />
            </button>
          </div>
        </div>
      </div>

      <!-- 播放列表卡片 -->
      <div class="rounded-3xl p-6 mt-8"
        style="background: rgba(255, 255, 255, 0.04); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);">
        <h3 class="text-lg md:text-xl font-semibold mb-4 text-white">播放列表</h3>

        <ul class="grid grid-cols-1 gap-4">
          <li v-for="file in videoFiles" :key="file"
            class="flex items-center justify-between rounded-xl p-3 transition hover:scale-[1.01] bg-white/6 backdrop-blur-sm">
            <span class="truncate text-white/90">{{ file }}</span>
            <button @click="playVideo(file)"
              class="ml-4 flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/40 text-white transition-colors duration-200">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 5v14l11-7z" />
              </svg>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const videoFiles = ref<string[]>([]);
const movieName = ref('');
const movieDetails = ref<any>({});
const openFolder = async () => {
  const movieDir = localStorage.getItem('movieDir') || '';
  if (!movieDir || !movieName.value) return;
  const movieFileDir = `${movieDir}/${movieName.value}`;
  await (window as any).electronAPI.openFolder(movieFileDir);
};
const searchSubtitles = () => {
  if (!movieDetails.value.title) return;
  const query = encodeURIComponent(movieDetails.value.title);
  const url = `https://zimuku.org/search?q=${query}&chost=zimuku.org`;
  (window as any).electronAPI.openExternal(url);
};

const getVideoFiles = async () => {
  const movieDir = localStorage.getItem('movieDir') || '';
  if (!movieDir || !movieName.value) return;
  const movieFileDir = `${movieDir}/${movieName.value}`;
  videoFiles.value = await (window as any).electronAPI.getMovieFiles(movieFileDir);
};

const getMovieDetails = async () => {
  const movieDir = localStorage.getItem('movieDir') || '';
  if (!movieDir || !movieName.value) return;
  const movieFileDir = `${movieDir}/${movieName.value}`;
  const details = await (window as any).electronAPI.readMovieDetails(movieFileDir);
  if (details) {
    movieDetails.value = {
      backdrop: details.backdropPath || '',
      title: details.title || movieName.value,
      poster: details.posterPath || '',
      overview: details.overview || '暂无简介',
      genres: details.genres?.map((g: any) => g.name) || [],
      runtime: details.runtime || '',
      vote_average: details.vote_average || '',
      release_date: details.release_date || '',
    };
  }
};

const playVideo = async (fileName: string) => {
  const movieDir = localStorage.getItem('movieDir') || '';
  if (!movieDir || !movieName.value) return;
  const movieFileDir = `${movieDir}/${movieName.value}`;
  await (window as any).electronAPI.playMovie(movieFileDir + '/' + fileName);
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  movieName.value = route.params.name as string;
  getVideoFiles();
  getMovieDetails();
});


defineExpose({
  name: 'MovieDetail',
})
</script>

<style scoped>
/* 背景图淡入 */
.absolute[style] {
  animation: bgFade 0.6s ease;
}

@keyframes bgFade {
  from {
    opacity: 0;
    transform: scale(1.02);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 简介区域的自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
</style>